import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import {
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
  Mesh,
  BoxBufferGeometry,
  MeshBasicMaterial,
  TextureLoader,
  EquirectangularReflectionMapping,
} from "three";

let camera: PerspectiveCamera, scene: Scene, renderer: WebGLRenderer;
let orbitControl: OrbitControls;

init();

animate();
function init() {
  camera = new PerspectiveCamera(
    70,
    window.innerWidth / window.innerHeight,
    1,
    1000
  );
  camera.position.z = 400;

  scene = new Scene();

  let texture = new TextureLoader().load(
    require("../static/textures/panorama_room.jpg").default
  );

  texture.mapping = EquirectangularReflectionMapping;
  scene.background = texture;

  let geometry = new BoxBufferGeometry(100, 100, 100, 10, 10);
  let material = new MeshBasicMaterial({
      color: '#fff',
      reflectivity: 1
  })
  material.envMap = texture;
  let mesh = new Mesh(geometry, material);
  scene.add(mesh)

  renderer = new WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  orbitControl = new OrbitControls(camera, renderer.domElement)
  document.body.appendChild(renderer.domElement);
  // renderer.render(scene, camera);
}

function animate() {
  requestAnimationFrame(animate);

  renderer.render(scene, camera);
}
